<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			/*
			 
			 * 两列式布局 一列固定 一列自适应
			 * 1.让固定的一列设置固定宽度并且设置浮动属性。
			 * 2.然后在固定列的的后面，写自适应列。不需要设置宽度，记得设置overflow： hidden;这样自适应的内容就不会出现在浮动列的后面
			
			 * */
			.left{
				width: 300px;
				height: 500px;
				background: skyblue;
				float: left;
			}
			.right{
				height: 500px;
				background: red;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="left">
			
		</div>
		<div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa pariatur vitae accusamus laborum blanditiis aliquid officia eos omnis amet inventore. Numquam voluptate vel sit vero quae commodi provident earum quis.</div>
	</body>
</html>
